<script setup>
import {ref,reactive, watch, watchEffect} from "vue"
let fullname = ref('')
let firstname=ref('')

let lastname=reactive({
    name:''
})

// watch(firstname,()=>{
//     fullname.value=firstname.value+lastname.name;
// })

// watch(()=>lastname.name,()=>{
//     fullname.value=firstname.value+lastname.name;
// })


// watch(()=>lastname,()=>{
//     fullname.value=firstname.value+lastname.name;
// },{deep:true,immediate:true})

// 全局监听
watchEffect(()=>{
    fullname.value=firstname.value+lastname.name;
});

</script>

<template>
    <div>
    全名:{{ fullname }} <br>
    姓氏:<input type="text" v-model="firstname"> <br>
    名字:<input type="text" v-model="lastname.name"> <br>
  </div>
</template>

<style scoped>

</style>
